<template>
  <div class="achive-details">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1" class="transform-down">
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">归档明细（至少上传一份）</span>
        </template>
        <el-button
          v-if="pagestatus != 'detail'"
          type="primary"
          class="plusbtn"
          style="width: 80px"
          @click="additem"
          >添加</el-button
        >
        <div class="textcontent">
          <div class="table-header">
            <div class="header-item" style="width: 30px">操作</div>
            <div class="header-item">
              <span style="color: red">*</span> 文档类型
            </div>
            <div class="header-item">
              <span style="color: red">*</span> 文件名称
            </div>
            <div class="header-item">
              <span style="color: red">*</span> 实归档份数
            </div>
            <div class="header-item">
              <span style="color: red">*</span> 每份页数
            </div>
            <div class="header-item">
              <span style="color: red">*</span> 云盘位置
            </div>
            <div class="header-item">备注</div>
          </div>
          <div
            class="table-content"
            v-for="(item, index) in dataArray"
            :key="index"
          >
            <div class="content-item">
              <el-icon
                title="删除"
                color="#E33838"
                class="table-icon"
                :size="20"
                @click="delitem(index)"
                v-if="pagestatus != 'detail'"
              >
                <Delete />
              </el-icon>
            </div>
            <div class="content-item">
              <div class="selectstyle">
                <el-select
                  v-model="item.fileType"
                  :disabled="pagestatus == 'detail'"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.dictValue * 1"
                    :label="item.dictLabel"
                    :value="item.dictValue * 1"
                  />
                </el-select>
              </div>
            </div>
            <div class="content-item">
              <Upload
                :fileList="item.contractTemplate"
                :limit="1"
                accept=".doc,.docx"
                :isFull="true"
                :isCanDelete="pagestatus != 'detail'"
                :showButton="item.contractTemplate.length == 0"
                @success="(result) => uploadSuccess(result, index)"
                @deleteFile="(result) => uploadRemove(result)"
                :disabled="pagestatus == 'detail'"
              >
                <template #content>
                  <span class="textstyle">点击上传</span>
                </template>
              </Upload>
            </div>

            <div class="content-item">
              <el-input
                v-model="item.realCount"
                placeholder="请填写（份）"
                class="inputstyle"
                type="number"
                :disabled="pagestatus == 'detail'"
              >
              </el-input>
            </div>
            <div class="content-item">
              <el-input
                v-model="item.realPage"
                placeholder="请填写（页）"
                class="inputstyle"
                type="number"
                :disabled="pagestatus == 'detail'"
              >
              </el-input>
            </div>
            <div class="content-item">
              <div class="selectstyle">
                <!-- <el-tree-select
                  style="height: 100%"
                  v-model="item.folderId"
                  :data="diskList"
                  :props="{
                    value: 'folderId',
                    label: 'name',
                    children: 'children',
                  }"
                  value-key="folderId"
                  placeholder="请选择"
                  check-strictly
                  clearable
                  :render-after-expand="false"
                /> -->
                <el-cascader
                  v-model="item.folderIdList"
                  :options="diskList"
                  :props="{
                    value: 'folderId',
                    label: 'name',
                    children: 'children',
                  }"
                  clearable
                  :disabled="pagestatus == 'detail'"
                />
              </div>
            </div>
            <div class="content-item">
              <el-input
                v-model="item.remark"
                placeholder="请填写"
                class="inputstyle"
                :disabled="pagestatus == 'detail'"
              >
              </el-input>
            </div>
          </div>
        </div>
        <div class="tooltip">
          本次应归档
          {{ pigeonholeNumber }} 份，实际归档{{
            filetotal
          }}分，填报后请将文件转交至总经办！
        </div>
        <div class="btn">
          <el-button
            type="primary"
            style="width: 80px"
            @click="submit"
            v-if="pagestatus != 'detail'"
            >提交</el-button
          >
          <el-button
            style="width: 80px"
            @click="closedialog"
            v-if="pagestatus == ''"
            >取消</el-button
          >
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, provide, inject, computed } from "vue";
import { getselectFolderList } from "@/api/seal/placeonfile";
import { gettypeContract } from "@/api/seal/placeonfile";
import { ElMessage, ElMessageBox } from "element-plus";

import Upload from "@/components/Upload/index";

const emits = defineEmits(["close", "closeauditDialog1"]);

const props = defineProps({
  detaildataArray: {
    type: Array,
    default() {
      return [];
    },
  },
  pagestatus: {
    type: String,
    default: "",
  },
  pigeonholeNumber: {
    type: Number,
    default: 0,
  },
});
const detail = inject("detail");
let dataArray = ref([]);
watch(
  () => props.detaildataArray,
  (newValue) => {
    if (props.pagestatus == "") {
      newValue = newValue.map((item) => {
        item.contractTemplate = [];
        return item; // 确保返回修改后的项
      });
    }
    setTimeout(() => {
      dataArray.value = newValue;
    }, 500);
    console.log("dataArray.value", dataArray.value);
  },
  {
    immediate: true,
  }
);

const filetotal = computed(() => {
  return dataArray.value.reduce((total, item) => total + item.realCount * 1, 0);
});

// 折叠栏默认展开
const activeNames = ref(["1", "2", "3"]);

let options = [];
// 云盘列表
const diskList = ref([]);

/**
 * @description: 新增表单项
 */
const additem = () => {
  let check = dataArray.value.every((item) => {
    return (
      item.fileType != null &&
      item.realCount != null &&
      item.realPage != null &&
      item.folderIdList.length != 0 &&
      item.contractTemplate.length != 0
    );
  });
  if (check) {
    dataArray.value.push({
      fileType: null,
      realCount: null,
      realPage: null,
      remark: null,
      folderIdList: [],
      contractTemplate: [],
    });
  } else {
    ElMessage.error("请先填写完添加的文档明细后再次添加！");
  }
};
/**
 * @description: 联级选择
 */
const handleChange = (value) => {
  console.log(value);
};
/**
 * @description: 删除表单项
 */
const delitem = (index) => {
  dataArray.value.splice(index, 1); // 从索引位置开始删除一个元素
};
/**
 * @description: 提交审核
 */
const submit = () => {
  if (dataArray.value.length > 0) {
    let check = dataArray.value.every((item) => {
      return (
        item.fileType != null &&
        item.realCount != null &&
        item.realPage != null &&
        item.folderIdList.length != 0 &&
        item.contractTemplate.length != 0
      );
    });
    if (check) {
      console.log("归档", dataArray.value);
      dataArray.value = dataArray.value.map((element) => {
        return (element = { ...element, ...element.contractTemplate[0] });
      });
      emits("submitAuditing", dataArray.value);
    } else {
      ElMessage.error("请先填写完添加的文档明细后再次提交！");
    }
  } else {
    ElMessage.error("至少上传一份文档明细！");
  }
};
/**
 * @description: 关闭弹窗
 */
const closedialog = () => {
  if (props.pagestatus == "edit") {
    detail();
  } else {
    emits("close");
  }
};

/**
 * @description: 文件上传成功处理
 * @param {Object} response 文件信息
 */
function uploadSuccess(response, index) {
  console.log("response", response, index);
  dataArray.value[index].contractTemplate.push({
    ...response,
  });
}

/**
 * @description: 删除文件
 * @param {Number} index 当前文件索引
 */
function uploadRemove(index) {
  dataArray.value[index].contractTemplate.splice(index, 1);
}

/**
 * @description: 获取字典
 */
async function getDicts() {
  //云盘
  getselectFolderList({ type: 0 }).then((response) => {
    diskList.value = response.data;
  });
}
/**
 * @description: 获取字典下拉
 */
const gettypeContractdata = async () => {
  await gettypeContract({
    dictType: "erp_archive_file_type",
    type: 1,
  }).then((res) => {
    if (res.code == 200) {
      options = res.data;
    }
  });
};

onMounted(() => {
  getDicts();
  gettypeContractdata();
});
</script>

<style scoped lang="scss">
.achive-details {
  position: relative;
  .plusbtn {
    position: absolute;
    top: 8px;
    right: 30px;
  }
  .textcontent {
    border-bottom: 1px solid #cccccc;
    .table-header {
      height: 40px;
      line-height: 40px;
      margin-top: 10px;
      background-color: #c5c4c4;
      display: flex;
      font-size: 14px;
      .header-item {
        border-top: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
        flex: 1;
        font-weight: 700;
        text-align: center;
      }
      .header-item:first-child {
        width: 50px !important;
        flex: unset;
      }
      .header-item:nth-child(3) {
        width: 250px !important;
        flex: unset;
      }
      .header-item:last-child {
        flex: 2;
      }
    }
    .table-content {
      height: 40px;
      line-height: 40px;
      display: flex;
      font-size: 14px;
      .content-item {
        border-top: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
        flex: 1;
        font-weight: 700;
        text-align: center;
        display: flex;
        align-items: center;
        .selectstyle {
          display: flex;
          :deep(.el-icon svg) {
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top-color: #6f6f6f;
            transform: translateY(4px);
          }
          :deep(.el-input__wrapper) {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
          }
          :deep(.el-input__wrapper.is-focus) {
            box-shadow: none !important;
          }
          :deep(.el-select .el-input__wrapper.is-focus) {
            box-shadow: none !important;
          }
          :deep(.el-select .el-input.is-focus .el-input__wrapper) {
            box-shadow: none !important;
          }
        }
        .inputstyle {
          :deep(.el-input__wrapper) {
            box-shadow: none !important;
          }
        }
        .textstyle {
          color: #2c71fc;
          transform: translateY(4px);
        }
      }
      .content-item:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px !important;
        flex: unset;
      }
      .content-item:nth-child(3) {
        width: 250px !important;
        flex: unset;
      }
      .content-item:last-child {
        flex: 2;
        border-right: 1px solid #cccccc;
      }
    }
  }
  .tooltip {
    margin-top: 10px;
    height: 50px;
    background-color: #fff0dc;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
  }
  .btn {
    text-align: right;
    margin-top: 30px;
  }
}
</style>
